<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body,
      #app {
        height: 100%;
      }

      #app {
        display: flex;
        flex-direction: column;
      }

      .lv-header,
      .lv-footer {
        height: 200px;
      }

      .lv-header {
        border-bottom: 1px solid #000;
      }

      .lv-footer {
        border-top: 1px solid #000;
      }

      .lv-main {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <lv-header></lv-header>
      <lv-main></lv-main>
      <lv-footer></lv-footer>
    </div>

    <script src="./lib/vue.global.js"></script>
    <script>
      const { provide, inject, ref } = Vue;
      const app = Vue.createApp({
        setup() {
          const theme = {
            light: {
              color: "#000",
              backgroundColor: "#fff",
            },
            dark: {
              color: "#fff",
              backgroundColor: "#000",
            },
          };

          let curTheme = ref(theme.light);

          // 传递数据
          provide("theme", curTheme);
          // 传递方法
          provide("changeTheme", () => {
            // 修改当前的 curTheme 实现样式的切换
            curTheme.value = theme.dark;
            // curTheme = theme.dark;
            // console.log(curTheme);
            // alert("changeTheme");
          });

          return {
            theme,
          };
        },
      });

      app.component("lv-header", {
        template: `
          <div class="lv-header" :style="theme"></div>
        `,
        setup() {
          const theme = inject("theme");
          return {
            theme,
          };
        },
      });

      app.component("lv-main", {
        template: `
          <div class="lv-main">
            <lv-button>主题按钮</lv-button>  
          </div>
        `,
      });

      app.component("lv-footer", {
        template: `
          <div class="lv-footer"></div>
        `,
      });

      app.component("lv-button", {
        template: `
          <button class="lv-button" :style="theme" @click="abc">
            <slot></slot>  
          </button>
        `,

        setup() {
          // 通过 inject 获取 provide 提供的数据
          const theme = inject("theme");
          const abc = inject("changeTheme");
          console.log(theme);
          return {
            theme,
            abc,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
